import React from 'react';
import {observer, inject} from "mobx-react";
import {reaction} from "mobx";
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import '../../style/login/login.less'
import Notice from '../../tools/notice/notice'
@inject("loginStore")
@observer
class Login extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            account: "",
            password: "",
        }
    }

    componentDidMount(): void {
        reaction(
            () => this.props.loginStore.isLogin,
            (isLogin, reaction) => {
                this.props.history.push("/")
            }
        )
    }

    render() {
        return (
            <div className="loginContent">
                <div className="loginCard">
                    <div className="loginCol">
                        <TextField
                            id="outlined-password-input"
                            label="账户"
                            type="password"
                            autoComplete="current-password"
                            variant="outlined"
                            onChange={(account) => {
                                if(account.target.value.length<=0){

                                }
                                this.setState(
                                    {"account": account.target.value}
                                )
                            }}
                        />
                    </div>
                    <div className="loginCol">
                        <TextField
                            id="outlined-password-input"
                            label="密码"
                            type="password"
                            autoComplete="current-password"
                            variant="outlined"
                            onChange={(password) => {
                                if(password.target.value.length<=0){
                                        this.handleClickVariant("error");
                                }
                                this.setState(
                                    {"password": password.target.value}
                                )
                            }}
                        />
                    </div>
                    <div className="loginCol" style={{display: " flex", flexDirection: "column"}}>
                        <Button variant="contained" onClick={() => {
                            // Notice.notification("11`1");
                            console.log(Notice("sdsd"))
                            // return this.props.loginStore.login(this.state.account, this.state.password)
                        }} color="primary" disableElevation>
                            登录
                        </Button>
                        <div style={{height: '1rem'}}></div>
                        <Button variant="contained" onClick={() => {
                            this.props.history.push("/register")
                        }} color="primary" disableElevation>
                            注册
                        </Button>
                    </div>
                </div>
            </div>
        )
    }
}

export default Login
